<template>
  <div class="profile">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="人员名称" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
      <el-form-item label="联系方式" prop="contact">
        <el-input v-model="ruleForm.contact"></el-input>
      </el-form-item>
    <el-form-item label="入职日期" >
      <el-col :span="11">
        <el-form-item prop="date">
          <el-date-picker type="date"  placeholder="选择日期" v-model="ruleForm.date" style="width: 218%" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="就职地址" prop="address">
      <el-input type="textarea" v-model="ruleForm.address"></el-input>
    </el-form-item>
    <el-form-item label="人员性别" prop="sex">
      <el-radio-group v-model="ruleForm.sex">
        <el-radio label="男"></el-radio>
        <el-radio label="女"></el-radio>
      </el-radio-group>
    </el-form-item>
      <el-form-item label="人员职业" prop="position">
        <el-select v-model="ruleForm.position" placeholder="请选择职位" style="width: 100%">
          <el-option
            v-for="item in ruleForm.positions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">立即添加</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
   </div>

</template>

<script>
  import {requestPost} from "../../../../network/request";

  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          contact: '',
          date: '',
          sex: '',
          address: '',
          positions: [{
            value: '老板',
            label: '老板'
          }, {
            value: '管理',
            label: '管理'
          }, {
            value: '财务',
            label: '财务'
          }, {
            value: '员工',
            label: '员工'
          }],
          position: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入人员名称', trigger: 'blur' },
          ],
          contact: [
            { required: true, message: '请输入联系方式', trigger: 'blur' },
          ],
          sex: [
            { required: true, message: '请选择人员性别', trigger: 'change' }
          ],
          address: [
            { required: true, message: '请填写任职地址', trigger: 'blur' }
          ],
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            requestPost({
              url: 'staff/insert',
              data: {
                name: this.ruleForm.name,
                contact: this.ruleForm.contact,
                date: this.ruleForm.date,
                sex: this.ruleForm.sex,
                address: this.ruleForm.address,
                position: this.ruleForm.position
              }
            })
            alert("添加成功")
            this.$router.replace("/user/userList");
          } else {
            alert("添加失败")
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
<style>
  .demo-ruleForm{
    width: 70%;
  }
  .profile{
    text-align: center;
    margin: 0 auto;
    width: 50%;
    padding-top: 5%;
  }
</style>
